<template>
    <div class="container">
        <Header :left="true" title="修改密码"></Header>

        <div class="box">
            <el-form :model="pwd" ref="ruleForm" label-width="0px">
                <el-form-item prop="originPwd" :rules="[{ required: true, message: '请输入原密码', trigger: 'blur' }]" >
                    <el-input type="password" v-model="pwd.originPwd" placeholder="原密码">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="newPwd" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
                    <el-input type="password" placeholder="请输入新密码" v-model="pwd.newPwd">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="secondNewPwd" :rules="[{required: true, message: '请输入确认密码', trigger: 'blur' }]">
                    <el-input type="password" placeholder="请输入确认密码" v-model="pwd.secondNewPwd">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button style="width:100%" :loading="loading" type="primary" @click="updateConfirm">确认修改</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import Header from '../../common/Header.vue';
export default {
    components:{Header},
    data:function(){
        return {
            loading:false,
            pwd:{
                originPwd:'',
                newPwd:'',
                secondNewPwd:''
            }
        };
    },
    methods:{
        updateConfirm(){
            var that = this;
            this.$refs['ruleForm'].validate((valid) => {
                if (!valid) { return; }
                if(that.pwd.newPwd !== that.pwd.secondNewPwd){
                    that.$message.error('二次密码输入不一致');
                    return;
                }
                that.loading = true;
                that.$http.post('/channel/auth/updatePwd.json',that.pwd).then(data=>{
                    that.loading = false;
                    if(data.data.code != '0'){
                        that.$message.error(data.data.msg);
                        return;
                    }
                    that.$message.success('密码修改成功');
                    // 退出登录，重新登录
                    localStorage.removeItem('userinfo');
                    that.toPage('/login');
                }).catch(error=>{
                    that.$message.error('请求出错');
                    that.loading = false;
                });
            });
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
    }
    .box{
        width: 100%;
        background: #fff;
        border-radius: 10px;
        position: relative;
        padding: 40px 40px;
    }
    .box .box-item{
        padding: 10px 0;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-right-icon{
        position: absolute;
        top:0;bottom: 0;
        margin: auto;
        right: 10px;
        width: 20px;
        height: 20px;
    }
    .user-box{
        width: 100%;
        position: relative;
        padding: 10px 10px 10px 100px;
    }
    .user-box .avatar{
        width: 80px;
        height: 80px;
        position: absolute;
        top:10px;
        left: 10px;
    }
    .user-box .username{
        color: #000;
        font-size: 16px;
        margin: 10px 0;
    }
</style>
